<style include="profile-creation-shared profile-picker-shared cr-shared-style">
  :host {
    --account-button-hover-color: var(--md-background-color);
  }

  .banner {
    background-color: var(--theme-frame-color);
    height: var(--banner-height);
  }

  #accountsContainer {
    background-color: white;
    border: var(--cr-hairline);
    border-color: var(--google-grey-300);
    border-radius: 8px;
    margin: 65px 25% 25px 25%;
    min-width: 500px;
    padding-bottom: 30px;
    padding-top: 30px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 50%;
  }

  #product-logo {
    height: 32px;
  }

  #textContainer {
    margin: 20px 40px;
  }

  #buttonsContainer {
    margin: 20px;
  }

  .account-button {
    --account-avatar-size: 48px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    font-family: roboto;
    text-align: start;
    width: 100%;
  }

  .account-button:hover {
    background-color: var(--account-button-hover-color);
  }

  .account-avatar {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: var(--account-avatar-size);
    justify-content: center;
    margin: auto 0;
    width: var(--account-avatar-size);
  }

  .account-text {
    display: flex;
    flex-direction: column;
    height : var(--account-avatar-size);
    justify-content: center;
    margin: 10px;
    width: calc(100% - var(--account-avatar-size));  /* Required for ellipsis */
  }

  .account-name {
    color: var(--cr-primary-text-color);
    font-size: var(--text-font-size);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .account-email {
    color: var(--cr-secondary-text-color);
    font-size: var(--text-font-size);
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .divider {
    border-top: var(--cr-separator-line);
  }

  #otherAccountIcon {
    --account-icon-size: 32px;
    --iron-icon-fill-color: var(--cr-secondary-text-color);
    --iron-icon-height: var(--account-icon-size);
    --iron-icon-width: var(--account-icon-size);
  }

  #footer {
    padding-top: 50px;
  }

  @media (prefers-color-scheme: dark) {
    :host {
      --account-button-hover-color: var(--google-grey-800);
    }

    #accountsContainer {
      background-color: var(--md-background-color);
      border-color: var(--google-grey-700);
    }
  }
</style>

<div style$="--theme-frame-color:[[profileThemeInfo.themeFrameColor]];
             --theme-text-color:[[profileThemeInfo.themeFrameTextColor]];">
  <div id="signinPromoBanner" class="banner"></div>
  <template is="dom-if" if="[[hasPreviousRoute_]]">
    <cr-icon-button id="backButton" iron-icon="cr:arrow-back"
        on-click="onBackClick_" aria-label$="[[getBackButtonAriaLabel_()]]">
    </cr-icon-button>
  </template>
</div>
<div id="accountsContainer">
  <img id="product-logo" on-click="onProductLogoTap_"
      srcset="chrome://theme/current-channel-logo@1x 1x,
              chrome://theme/current-channel-logo@2x 2x"
      role="presentation">
  <div id="textContainer">
    <h2>$i18n{accountSelectionLacrosTitle}</h2>
    <h3>$i18n{accountSelectionLacrosSubtitle}</h3>
  </div>
  <div id="buttonsContainer">
    <template is="dom-repeat" items="[[availableAccounts_]]">
      <button class="account-button" on-click="onAccountClick_">
        <!-- Placeholder account image. -->
        <img class="account-avatar" src="[[item.accountImageUrl]]">
        <div class="account-text">
          <div class="account-name">[[item.name]]</div>
          <div class="account-email">[[item.email]]</div>
        </div>
      </button>
      <div class="divider"></div>
    </template>
    <button class="account-button" on-click="onOtherAccountClick_">
      <div class="account-avatar">
        <iron-icon icon="profiles:account-circle" id="otherAccountIcon">
        </iron-icon>
      </div>
      <div class="account-text">
        <div class="account-name">
          $i18n{accountSelectionLacrosOtherAccountButtonLabel}
        </div>
      </div>
    </button>
  </div>
</div>
<div id="footer"></div>
